<template>
	<view>
		<!-- 空 -->
		<view class="empty_box" v-if="!order">
			<image src="../../static/empty.png"></image>
			<view class="text">您还没有出行中行程</view>
			<view class="text">快去首页看看哪里好玩吧！</view>
		</view>
		<view class="orderDetail_box" v-if="order">
			<view class="state_box">
				<view class="bottom dis_fx fx_center">
					<view class="item item1 dis_fx fx_column"@click="toNewPage('/pages/customer/customer')"><image src="../../static/zi%20xun_icon.png"></image><text>在线咨询</text></view>
					<view class="item item2 dis_fx fx_column" ><image src="../../static/dian%20hua_icon.png"></image><text>商家电话</text></view>
				</view>
			</view>
			<view class="addit_item">
				<view class="item">
					<view class="tit">产品信息</view>
					<view class="s_tit"><navigator @click="toNewPage('/pages/attractionsDetail/attractionsDetail?productId='+order.productId)" class="dis_fx fx_column"><text>{{order.product.productTypeName}}{{order.product.productName}}</text><view class="icon"></view></navigator></view>
					<view class="info">出行日期：{{order.tripBeginDate}} ~ {{order.tripEndDate}}</view>
					<view class="info">￥1344元/*{{order.adultQty}}人</view>
				</view>
				<view class="item" v-if="order.accompaniers.length>1">
					<view class="tit">出行人</view>
					<template v-for="(item,index) in order.accompaniers" v-if="item.type==1">
						<view class="s_tit"><text>出行人{{index}}：{{item.name}}   {{item.mobilePhone}}</text></view>
						<view class="info">证件号：{{item.idCard}}</view>
					</template>
				</view>
				<view class="item">
					<view class="tit">地接信息</view>
					<view class="s_tit"><text>联系人：王五   15096325406</text></view>
					<view class="info">导游/司机：小哥  15454565454</view>
					<view class="info">集合地点：你猜</view>
					<view class="info">备注：</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import util from '../../common/util.js'
	export default {
		data() {
			return {
				order:null
			}
		},
		onLoad(){
			this.getTravel()
		},
		methods: {
			//打电话
			makeCall(phoneNum){
				uni.makePhoneCall({
					phoneNumber: phoneNum //仅为示例
				});
			},
			toNewPage(url){
				uni.navigateTo({url})
			},
			//获取行程信息
			getTravel(){
				uni.showLoading({
					mask:true,
					title: '加载中...'
				});
				var that=this;
				util.fetchGet('/order/travel',{},function(res){
					let order=res.data ;
					if(order!=null){
						order.tripBeginDate=util.formatDate(new Date(order.tripBeginDate),"yyyy-MM-dd");
						order.tripEndDate=util.formatDate(new Date(order.tripEndDate),"yyyy-MM-dd");
						that.order=order
					}
					
				},function(){},false)
			},
		}
	}
</script>
<style>
	.empty_box{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 40%;
	}
	.empty_box image{
		width: 120upx;
		height: 291upx;
		margin-bottom: 30upx;
	}
	.empty_box .text{
		font-size:28upx;
		color:rgba(153,153,153,1);
	}
	.pub_btn{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		background: #FFC800;
		color: #333333;
		font-size: 36upx;
		line-height: 100upx;
		text-align: center;
		border-radius: 0;
	}
	.pub_btn::after{
		border: 0 none;
	}
	.orderDetail_box{
		padding: 24upx 24upx 150upx;
	}
	.orderDetail_box .state_box{
		box-shadow: 0 0 18upx 0 rgba(106, 79, 13, 0.12);
		border-radius: 10upx;
		padding: 50upx 0 50upx;
	}
	.orderDetail_box .state_box .state{
		color: #333333;
		font-size: 48upx;
		font-weight: 600;
	}
	.orderDetail_box .state_box .state.state2{
		color: #FC5C1D
	}
	.orderDetail_box .state_box .state.state3{
		color: #333333
	}
	.orderDetail_box .state_box .prompt{
		color: #999999;
		font-size: 28upx;
	}
	.orderDetail_box .state_box .prompt text{
		color: #FC5C1D;
	}
	.orderDetail_box .state_box .price{
		color: #FFC800;
		font-size: 32upx;
		margin-top: 10upx;
	}
	.orderDetail_box .state_box .state_r text{
		color: #999999;
		font-size: 24upx;
	}
	/* .orderDetail_box .bottom{
		margin-top: 100upx;
	} */
	.orderDetail_box .bottom .item{
		margin: 0 70upx;
	}
	.orderDetail_box .bottom .item.item1 image{
		width: 40upx;
		height: 38upx;
	} 
	.orderDetail_box .bottom .item.item2 image{
		width: 32upx;
		height: 40upx;
	} 
	.orderDetail_box .bottom .item text{
		font-size: 32upx;
		color: #333333;
		margin-left: 30upx;
	}
	.orderDetail_box .addit_item{
		line-height: 2;
	}
	.orderDetail_box .addit_item .tit{
		color: #333333;
		font-size: 32upx;
		margin: 30upx 0 10upx;
		font-weight: 600;
	}
	.orderDetail_box .addit_item .s_tit .icon{
		background: url() no-repeat center/contain;
		width: 13upx;
		height: 28upx;
		margin-left: 20upx;
	}
	.orderDetail_box .addit_item .s_tit{
		font-size: 28upx;
		color: #333333;
	}
	.orderDetail_box .addit_item .info{
		font-size: 28upx;
		color: #999999;
	}
</style>
